<template>
  <div :class="info && info.type ? '' : 'app-container'">
    <div class="page-filter mb10 fl">
      <el-form ref="filter" :model="filter" label-width="0">
        <el-form-item class="mr10 mb5 fl">
          <ProFilter v-model="filter.pro_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl">
          <PurchaseSelect v-model="filter.pur_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl">
          <SupplierSelect v-model="filter.sup_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl">
          <EntrustSel v-model="filter.entrust_id" />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" prop="begin_time">
          <el-date-picker
            v-model="filter.begin_time"
            placeholder="开始时间"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" prop="end_time">
          <el-date-picker
            v-model="filter.end_time"
            placeholder="结束时间"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item class="mr10 mb5 fl" style="width: 300px">
          <el-button
            size="small"
            @click="app.resetFields($refs['filter'].$parent, 'filter')"
            >清 空</el-button
          >
          <el-button type="primary" size="small" @click="getList"
            >查 询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      class="search-table"
      :data="list"
      border
      :summary-method="getSummaries"
      show-summary
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" align="center" width="56px">
        <template slot-scope="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="签订公司"
        width="220px"
        :formatter="formatterCompany"
      />
      <el-table-column label="合同编号" width="190px">
        <template slot-scope="{ row }">
          {{ 'LOPO' + row.sn }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" width="220px" prop="pro_name" />
      <el-table-column
        label="签订日期"
        align="center"
        width="140px"
        prop="pur_time"
      />
      <el-table-column label="供应商" width="220px" prop="sup_name" />
      <el-table-column
        label="采购类型"
        align="center"
        width="90px"
        :formatter="formatterType"
      />
      <el-table-column label="货物明细" align="left" width="190px" prop="sn">
        <template slot-scope="{ row }">
          <a
            v-if="row.type === 1"
            href="javascript:void(0)"
            @click="
              handleDialog({
                ...row,
                ...{ dTitle: '货物明细', dType: 'view', dField: dField },
              })
            "
            >详情</a
          >
          <a
            v-if="row.type === 4"
            href="javascript:void(0)"
            @click="
              handleDialog({
                ...row,
                ...{
                  dTitle: '货物明细',
                  dType: 'view',
                  dField: dFieldEX,
                  dRef: 'dialogEX',
                },
              })
            "
            >详情</a
          >
          <span v-if="row.type === 3">
            {{ row.info_name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="采购金额" align="right" width="140px">
        <template slot-scope="{ row }">
          {{ app.toFix(row.price, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="付款金额" align="right" width="140px">
        <template slot-scope="{ row }">
          {{ app.toFix(row.pay, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="追加金额" align="right" width="140px">
        <template slot-scope="{ row }">
          {{ app.toFix(row.additional, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="追减金额" align="right" width="140px">
        <template slot-scope="{ row }">
          {{ app.toFix(row.reduction, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="已开票金额" align="right" width="140px">
        <template slot-scope="{ row }">
          {{ app.toFix(row.has_tax, 2) }}
        </template>
      </el-table-column>
      <el-table-column label="未开票金额" align="right" width="140px">
        <template slot-scope="{ row }">
          {{
            app.toFix(app.toFix(row.price, 2) - app.toFix(row.has_tax, 2), 2)
          }}
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="260px" prop="remark" />
    </el-table>
    <pagination
      v-show="filter.pageAll > 0"
      :total="filter.pageAll"
      :page.sync="filter.pageCurrent"
      :limit.sync="filter.pageNumber"
      @pagination="getList"
    />
    <Cos ref="cos" :info="dialog" />
    <Dialog ref="dialog" :get-data="getList" :info="dialog" />
    <DialogEX ref="dialogEX" :get-data="getList" :info="dialog" />
  </div>
</template>

<script>
import { purSummarys, purStatistics } from '@/api/purchase'
import Dialog from './components/mp/mp-dialog'
import DialogEX from '@/views/purchase/components/inventory/components/inventoryex-dialog'
import PurchaseSelect from '@/myComponents/PurchaseSelect'
import SupplierSelect from '@/myComponents/SupplierSelect'
import EntrustSel from '@/myComponents/EntrustSel'
import ProFilter from '@/components/ProFilter'
import page from '@/utils/page'

export default {
  name: '',
  components: {
    ProFilter,
    PurchaseSelect,
    SupplierSelect,
    EntrustSel,
    Dialog,
    DialogEX,
  },
  extends: page,
  props: {
    reqList: {
      default: purSummarys,
      type: Function,
    },
  },
  data() {
    return {
      price: {},
      dField: ['id', 'sup_id', 'remark', 'state', 'type'],
      dFieldEX: ['id', 'pro_id', 'remark'],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    formatterType(row) {
      let type = ''
      if (row.type === 1) {
        type = '物料采购'
      } else if (row.type === 2) {
        type = '设备采购'
      } else if (row.type === 3) {
        type = '工程外包'
      } else if (row.type === 4) {
        type = '库存出库'
      }
      return type
    },
    formatterCompany(row) {
      let company = ''
      if (row.company && row.company !== '') {
        company = row.company
      } else if (row.entrust_name && row.entrust_name !== '') {
        company = row.entrust_name
      }
      return company
    },
    getListAfter() {
      purStatistics({
        ...this.filter,
      })
        .then((response) => {
          this.price = response.info ? response.info : {}
        })
        .catch((err) => {
          this.$message.error(err.msg ? err.msg : '获取数据失败')
        })
    },
    getSummaries() {
      const sums = []
      sums[0] = '合计'
      sums[8] = this.app.toFix(this.price.price, 2)
      sums[9] = this.app.toFix(this.price.pay, 2)
      sums[10] = this.app.toFix(this.price.additional, 2)
      sums[11] = this.app.toFix(this.price.reduction, 2)
      sums[12] = this.app.toFix(this.price.has_tax, 2)
      sums[13] = this.app.toFix(this.price.price - this.price.has_tax, 2)
      return sums
    },
  },
}
</script>
